<template>
	<view class="dates_page flex">
		<view class="dates_left">
			<view class="item" v-for="date in dateList" :key="date.value">
				{{ date.label }}
			</view>
		</view>
		<scroll-view scroll-x class="dates_right scrollbar-none">
			<view class="dates_date flex">
				<view class="item flex" v-for="week in weekData" :key="week.date">
					<text class="chinese-text greyColor">{{ week.chinese }}</text>
					<text class="date-text">{{ week.date }}</text>
				</view>
			</view>
			<view
				class="dates_content flex"
				v-for="date in dateList"
				:key="date.value"
			>
				<view
					class="flex choose"
					v-for="week in weekData"
					:class="{
						active:
							generateUniqueValues(date, week) === currentSelectionSession,
						full: bookingTimeList.includes(generateUniqueValues(date, week)),
						disabled: noBookingTimeList.includes(
							generateUniqueValues(date, week),
						),
					}"
					:key="week.date"
					@click="chooseNumberOfSessions(date, week)"
				>
					{{
						generateUniqueValues(date, week) === currentSelectionSession
							? "已预约"
							: noBookingTimeList.includes(generateUniqueValues(date, week))
							? "不可预约"
							: bookingTimeList.includes(generateUniqueValues(date, week))
							? "约满"
							: "可预约"
					}}
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script setup>
import {
	getReservationDateOutApi,
	getReServationDateApi,
	getNoReServationDateApi,
	getNoOutReServationDateApi,
	getReservationDateInApi,
} from "@/api";
import { useDisabled } from "element-plus";
const props = defineProps({
	// 可选场次
	dateList: {
		type: Array,
		default: [],
	},
	// 回显
	currentTime: {
		type: String,
		default: "",
	},
	// 来源 in：内部 out：社会
	type: {
		type: String,
		default: "in",
	},
});
const emit = defineEmits(["choose"]);
// 当前一周
const weekData = ref([]);
// 约满
const bookingTimeList = ref([]);
// 不可预约
const noBookingTimeList = ref([]);
// 当前选择场次
const currentSelectionSession = ref(null);
watch(
	() => props.currentTime,
	(val) => {
		currentSelectionSession.value = val;
	},
);
// 选择场次
const chooseNumberOfSessions = (date, week) => {
	if (
		bookingTimeList.value.includes(generateUniqueValues(date, week)) ||
		noBookingTimeList.value.includes(generateUniqueValues(date, week))
	) {
		return;
	}
	currentSelectionSession.value = generateUniqueValues(date, week);
	emit("choose", {
		weekChines: week.chinese,
		date: week.date,
		timePeriod: date.value,
		year: week.year,
	});
};
// 生成唯一值
const generateUniqueValues = (date, week) => {
	return week.year + "-" + week.date + "-" + date.value;
};
onMounted(async () => {
	// weekData.value = getCurrentWeek();
	// 获取周信息
	const chineseWeek = ["天", "一", "二", "三", "四", "五", "六"];
	const { data } = await getReServationDateApi();
	weekData.value = data.map((e, i) => {
		return {
			chinese: "周" + chineseWeek[new Date(e).getDay()],
			day: new Date(e).getDay(),
			date: e.substring(e.indexOf("-") + 1, e.length),
			year: new Date(e).getFullYear(),
			yearDate: e,
		};
	});

	if (props.type === "in") {
		// 获得不可预约时间信息
		const { data: inNodate } = await getNoReServationDateApi();
		noBookingTimeList.value = inNodate;
		// 获得已预约时间信息
		const { data: date } = await getReservationDateInApi();
		bookingTimeList.value = date;
	} else {
		// 获得不可预约时间信息
		const { data: outNodate } = await getNoOutReServationDateApi();
		noBookingTimeList.value = outNodate;
		// 获得已预约时间信息
		const { data: date } = await getReservationDateOutApi();
		bookingTimeList.value = date;
	}
});
</script>
<style lang="scss" scoped>
.dates_ {
	&page {
		width: 100%;
	}
	&left {
		width: 150rpx;
		padding-right: 10rpx;
		margin-top: 80rpx;
		.item {
			@include line-height(80rpx);
			font-size: 24rpx;
		}
	}
	&right {
		width: calc(100% - 150rpx);
		display: flex;
		flex-direction: column;
	}
	&date {
		height: 80rpx;
		flex-wrap: nowrap;
		.item {
			flex: 0 0 130rpx;
			flex-direction: column;

			align-items: center;
			.chinese-text {
				font-size: 24rpx;
				@include line-height(35rpx);
			}
			.date-text {
				font-size: 27rpx;
				font-weight: bold;
				@include line-height(45rpx);
			}
		}
	}
	&content {
		.choose {
			flex: 0 0 110rpx;
			@include line-height(60rpx);
			background-color: $uni-color-primary;
			color: $uni-text-color-inverse;
			box-sizing: border-box;
			margin: 10rpx 0rpx 10rpx 20rpx;
			justify-content: center;
			border-radius: 6rpx;
			font-size: 24rpx;
			&.active {
				background-color: #07c160!important;
				color: #fff!important;
				border: 1rpx #07c160 solid!important;
			}
			&.full {
				background-color: #fff;
				color: red;
				border: 1rpx red solid;
			}
			&.disabled {
				background-color: #d7d7d7;
				color: #fff;
				border: 1rpx #d7d7d7 solid;
			}
		}
	}
}
</style>
